import { PlusOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/hooks';
import { Button, Form, Input, message, Modal, Switch, Upload } from 'antd';
import { Store } from 'rc-field-form/lib/interface';
import React, { useState } from 'react';
import cookie from 'react-cookies';
import { useDispatch } from 'react-redux';
import {getOriginString, getSecretString} from '../../../../../utils/encrypt';
import getImgInfo from '../../../../../utils/getImgInfo';
import { fetchRequest } from '../../../../../utils/Request';
import { url } from '../../../../../utils/url';
import actionTypes from '../../../actionTypes';
import '../../index.css';
import moment from "../StudentInformationManage/EditStudentInformation";

interface InfoState {
	whiteCard: boolean,
	face: boolean,
	blackCard: boolean,
	blackCardCode: string
}

interface ValidateState {
	state: "" | "success" | "warning" | "error" | "validating" | undefined,
	help: string | undefined,

}


// interface OpenTypeInfo {
//     studentName:string,
//     phone: string,
//     whiteCard: boolean,
//     whiteCardCode:string,
//     face: boolean
//
// }

export default function ModifyStudentEntrance(props: any) {

	const [state, setstate] = useState<InfoState>({ whiteCard: props.content.openType.openType.whiteCard,
		face: props.content.openType.openType.face, blackCard: props.content.openType.openType.blackCard,
		blackCardCode: props.content.blackCardCode })


	const [validateState, setvalidateState] = useState<ValidateState>({ state: undefined, help: undefined })

	const layout = {
		labelCol: { span: 5 },
		wrapperCol: { span: 14 },
	};

	const tailLayout = {
		wrapperCol: { offset: 5, span: 14 },
	};

	const [form] = Form.useForm();

	const dispatch = useDispatch()



	const { info } = props;

	function onFinish(value: Store) {
		// console.log(value)
		//TODO 后续进行请求并决定是否跳转到下一步

		// console.log(value)

		const data = [];

		if (value.whiteCard) {
			data.push("白卡开门")
		} else if (state.blackCard) {
			data.push("翼卡通开门")
		}

		// if (value.face) {
		// 	data.push("人脸开门")
		// }
		value.face = true
		data.push("人脸开门")

		if (props.content.ifFaceNecessary && !value.face) {
			// message.destroy();
			Modal.error({ content: "该区域强制要求录入人脸!" });
			return;
		}

		if (data.length === 0) {
			Modal.error({ content: "必须要选择一种开门方式!" });
			return;
		}



		submitOpenType.run(
			{ value: value })


		// props.onNext()
	}
	//提交开门方式的接口
	async function submitOpenTypeRequest( value: any) {
		const params= {
			accessCardId:props.content.accessCardId,
			addressId:props.content.addressId,
			whiteCard:typeof value.value.whiteCard==="undefined"?"false":String(value.value.whiteCard),
			face:typeof value.value.face==="undefined"?"false":String(value.value.face),
			whiteCardCode:typeof value.value.whiteCardCode==="undefined"?"":value.value.whiteCardCode,
			imei:typeof value.value.imeiCardCode==="undefined"?"":value.value.imeiCardCode,
			blackCard:typeof state.blackCard==="undefined"?"false":String(state.blackCard),
			blackCardCode:typeof state.blackCardCode==="undefined"?"false":state.blackCardCode,
			photo:props.content.photo,
			startDate:props.content.startDate,
			endDate:props.content.endDate
		}

		if(value.value.whiteCard){
			if( params.whiteCardCode==="" && params.imei===""){
				Modal.error({content: "白卡卡号和IMEI卡号请至少输入一项！"});
				return false;
			}
		}

		try {
			const json = await fetchRequest(url.MODIFY_ACCESS_OPEN_TYPE, params);
			if (json.success) {
				props.modifySuccess();
			}
			else {
				message.destroy();
				message.error(json.error)
			}
		} catch (error:any) {
			message.destroy();
			message.error(error.message);
		}
	}
	const submitOpenType = useRequest(submitOpenTypeRequest, {
		manual: true,
		loadingDelay: 200
	})
	return (
		<Form
			form={form} {...layout}  onFinish={onFinish} initialValues={{
			studentName: typeof props.content.studentName==="undefined"?"":props.content.studentName,
			phone:typeof props.content.phone==="undefined"?"":props.content.phone,
			whiteCardCode:typeof props.content.whiteCardCode==="undefined"?"":props.content.whiteCardCode,
			imeiCardCode:typeof props.content.imei==="undefined"?"":props.content.imei,
			whiteCard:props.content.openType.openType.whiteCard
		}}
		>
			<Form.Item label="姓名" name="studentName" rules={[{ required: true, message: '必须要输入名字' }]}>
				<Input disabled />
			</Form.Item>
			<Form.Item hasFeedback help={validateState.help} label="手机号码" name="phone"
					   validateStatus={validateState.state}
					   // rules={[{required: true, message: '必须要输入手机号码'}, ({getFieldValue}) => ({
						//    validator(rule, value) {
						// 	   // if (value === "")
						// 	   //     return Promise.reject("必须要输入手机号码")
					   //
						// 	   setstate({...state, blackCard: false});
						// 	   if (value === "") {
						// 		   setvalidateState({help: "必须要输入手机号码", state: "error"})
						// 		   return Promise.resolve()
						// 	   }
						// 	   if (!/^1[3456789]\d{9}$/.test(value)) {
						// 		   setvalidateState({help: "手机号码格式错误!", state: "error"})
						// 		   return Promise.reject("手机号码格式错误!")
						// 	   }
					   //
					   //
						// 	   setvalidateState({help: "", state: 'validating'})
						// 	   return fetchRequest(url.CHECK_BLACK_CARD_URL, {phone: value})
						// 		   .then(json => {
						// 			   if (json.success) {
						// 				   if (json.isBlackCard || json.isCanApply) {
						// 					   form.setFieldsValue({whiteCard: false})
						// 					   setstate({
						// 						   ...state,
						// 						   whiteCard: false,
						// 						   blackCard: true,
						// 						   blackCardCode: json.cardCode
						// 					   });
						// 				   }
						// 				   if (json.isBlackCard && !json.isCanApply) {
						// 					   setstate({...state, whiteCard: false, blackCard: true})
						// 					   setvalidateState({help: json.result, state: "error"})
						// 					   return Promise.resolve()
						// 				   }
						// 				   setvalidateState({help: json.result, state: "success"})
						// 				   return Promise.resolve()
						// 			   } else {
						// 				   setvalidateState({...validateState, state: 'error'});
						// 				   return Promise.reject(json.error)
						// 			   }
						// 		   }).catch(error => {
						// 			   return Promise.reject("手机号检验失败")
						// 		   })
						//    },
					   // })]}
					   validateTrigger="onBlur">
				<Input disabled={true}/>
			</Form.Item>


			<Form.Item
				// help={props.content.openType.openType.blackCard ? "该手机号为翼卡通,不能开通白卡开门!" : undefined}
				help={props.content.openType.openType.blackCard ? "该手机号为翼卡通" : undefined}
				label="白卡开门" name="whiteCard"
				valuePropName="checked"
				// initialValue={props.content.openType.openType.whiteCard}
				// rules={[{ required: true, message: '必须要选择是否白卡开门' }]}
			>
				<Switch
					// disabled={props.content.openType.openType.blackCard}
					onChange={value => { setstate({ ...state, whiteCard: value }) }}
				/>
			</Form.Item>

			<Form.Item label="白卡卡号" name="whiteCardCode" style={state.whiteCard ? undefined : { display: 'none' }} >
				<Input />
			</Form.Item>

			<Form.Item label="IMEI卡号" name="imeiCardCode" style={state.whiteCard ? undefined : { display: 'none' }} >
				<Input />
			</Form.Item>

			{/*<Form.Item label="人脸开门" name="face" valuePropName="checked"*/}
			{/*	// rules={[{ required: true, message: '必须要选择是否人脸开门' }]}*/}
			{/*>*/}
			{/*	<Switch disabled={props.content.ifFaceNecessary && state.face} />*/}
			{/*</Form.Item>*/}

			<br />
			<Form.Item {...tailLayout}>
				<Button type="primary" htmlType="submit" loading={submitOpenType.loading}>提交</Button>
			</Form.Item>


		</Form>
	)
}
